<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}">
</head>
<body>
    <h1 style="text-align: center;margin-top: 50px">用户管理</h1>
    <div style="margin: 30px 50px 50px 50px;text-align: center">
        <div style="float: left;margin-left: 120px">
            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="add()">添加用户</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" th:href="@{user/list}">查询用户</button>
        </div>
        <form th:action="@{/logout}" method="get">
            <button class="layui-btn layui-btn-sm layui-btn-danger" style="float: right;margin-right: 120px">退出登录</button>
        </form>
        <div style="text-align: center">
            <div class="layui-inline">
                <table class="layui-table" lay-data="{url:'user/list', page:true, id:'test'}" lay-filter="test">
                    <thead>
                    <tr>
                        <th lay-data="{field:'uid', width:80,align:'center'}">ID</th>
                        <th lay-data="{field:'username', width:80,align:'center'}">登录名</th>
                        <th lay-data="{field:'name', width:150,align:'center'}">昵称</th>
                        <th lay-data="{field:'loginCount', width:100,align:'center'}">登录次数</th>
                        <th lay-data="{field:'loginTime', width:180,align:'center',templet:'<div>{{ Format(d.loginTime,\'yyyy-MM-dd hh:mm:ss\')}}</div>'}">登录时间</th>
                        <th lay-data="{field:'lastLoginTime', width:180,align:'center',templet:'<div>{{ Format(d.lastLoginTime,\'yyyy-MM-dd hh:mm:ss\')}}</div>'}">上传登录时间</th>
                        <th lay-data="{field:'status',align:'center',width:90, toolbar: '#statusBar'}">状态</th>
                        <th lay-data="{field:'createTime', width:180,align:'center',templet:'<div>{{ Format(d.createTime,\'yyyy-MM-dd hh:mm:ss\')}}</div>'}">创建时间</th>
                        <th lay-data="{field:'updateTime', width:180,align:'center',templet:'<div>{{ Format(d.updateTime,\'yyyy-MM-dd hh:mm:ss\')}}</div>'}">修改时间</th>
                        <th lay-data="{fixed: 'right', width:120, align:'center', toolbar: '#operationBar'}">操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/plugins/layui/layui.js}" charset="utf-8"></script>
    <script type="text/html" id="statusBar">
        <input type="checkbox" lay-skin="switch" checked="{{d.status == 1 ? 'checked' :  '' }}" lay-text="开启|关闭">
            <!--<span class="label {{d.status == 1 ? 'bg-green' : 'bg-red'}}" >{{d.status == 1 ? '启用' :  '禁用' }}</span>-->
    </script>
    <script type="text/html" id="operationBar">
        <!--<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>-->
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a id="user-{{d.id}}" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script layout:fragment="js_fragments">
        $(function(){
            layui.use('table', function(){
                var table = layui.table;
            });
        });
        function add(){
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.open({
                    type: 2,
                    title: '添加用户',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['600px', '60%'],
                    content: 'user/toAdd'
                });
            });
        }
        function Format(datetime,fmt) {
            if (parseInt(datetime)==datetime) {
                if (datetime.length==10) {
                    datetime=parseInt(datetime)*1000;
                } else if(datetime.length==13) {
                    datetime=parseInt(datetime);
                }
            }
            datetime=new Date(datetime);
            var o = {
                "M+" : datetime.getMonth()+1,                 //月份
                "d+" : datetime.getDate(),                    //日
                "h+" : datetime.getHours(),                   //小时
                "m+" : datetime.getMinutes(),                 //分
                "s+" : datetime.getSeconds(),                 //秒
                "q+" : Math.floor((datetime.getMonth()+3)/3), //季度
                "S"  : datetime.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt))
                fmt=fmt.replace(RegExp.$1, (datetime.getFullYear()+"").substr(4 - RegExp.$1.length));
            for(var k in o)
                if(new RegExp("("+ k +")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            return fmt;
        }
    </script>
</body>
</html>